<template>
	<view class="cc-checkbox" :style="{
		width: containerWidth,
		'--primary': $theme.primary,
		'--content-color': $theme.contentColor,
		'--light-color': $theme.lightColor,
	}">
		<view 
			:class="[
				'cc-checkbox__item', 
				item.checkboxActive ? 'cc-checkbox__active' : '',
				disabled ? 'cc-checkbox__disabled' : ''
			]" 
			v-for="(item, index) in rangeList" 
			:key="index"
			@click="handleClick(item)"
		>
			<view>{{ item[showKey] }}</view>
			<view class="cc-checkbox__icon" v-if="item.checkboxActive">
				<image :src="icon" mode="aspectFit"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 多选框
	 */
	import Emitter from '../../libs/util/emitter.js';
	import { icon } from './icon.js';
	export default {
		name: 'w-checkbox',
		mixins: [Emitter],
		props: {
			value: {
				type: Array,
				default: () => []
			},
			// 列表
			list: {
				type: Array,
				default: () => []
			},
			showKey: {
				type: String,
				default: 'label'
			},
			valueKey: {
				type: String,
				default: 'value'
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				icon,
				containerWidth: 'calc(100% + 30rpx)',
				rangeList: []
			}
		},
		methods: {
			handleClick(item) {
				if (this.disabled) return;
				let s = new Set(this.value);
				if (item.checkboxActive) {
					s.delete(item[this.valueKey]);
				} else {
					s.add(item[this.valueKey]);
				}
				this.$emit('input', [...s]);
				this.$nextTick(() => {
					this.dispatch('w-form-item', 'on-form-change', [...s]);
				});
			}
		},
		mounted() {
			// 给容器加长30rpx的宽度，抵消每行最后一个元素margin-right带来的占位
			// #ifdef APP-VUE
			const query = uni.createSelectorQuery().in(this);
			query.select('.cc-checkbox').boundingClientRect(data => {
				this.containerWidth = uni.upx2px(30) + data.width + 'px';
			}).exec();
			// #endif
		},
		watch: {
			// 生成新的数组用于组件渲染，加入标识active
			list: {
				handler(newValue) {
					this.rangeList = newValue.map(item => ({
						...item,
						checkboxActive: false
					}));
				},
				immediate: true
			},
			// 根据value修改active
			value: {
				handler(newValue) {
					let s = new Set(this.value);
					this.rangeList.forEach((item, index) => {
						item.checkboxActive = s.has(item[this.valueKey]);
					})
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cc-checkbox {
		display: flex;
		flex-wrap: wrap;
		width: calc(100% + 30rpx);
		margin-bottom: -20rpx;
		box-sizing: content-box;
		margin-top: 10rpx;
		&__item {
			line-height: 60rpx;
			height: 60rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
			padding: 0 30rpx;
			margin-right: 30rpx;
			margin-bottom: 30rpx;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 200%;
				height: 200%;
				border: 1px solid var(--content-color);
				border-radius: 10rpx;
				transform: scale(.5);
				transform-origin: 0 0;
				box-sizing: border-box;
			}
		}
		&__disabled {
			color: var(--light-color);
			&::after {
				border-color: var(--light-color);
			}
		}
		&__active {
			&::after {
				border-color: var(--primary);
				border-width: 2px;
			}
			.cc-checkbox__icon {
				position: absolute;
				border: 30rpx solid transparent;
				border-bottom-color: var(--primary);
				border-left-width: 40rpx;
				border-right-width: 0;
				height: 0;
				width: 0;
				right: 0;
				bottom: 0;
				image {
					position: absolute;
					width: 20rpx;
					height: 14rpx;
					left: -22rpx;
					bottom: -27rpx;
				}
			}
		}
	}
</style>
